<div class="nv-dialog">
  <div mat-dialog-title class="dialog-header">
    <div class="pull-left">
      Edit cluster
    </div>
    <div class="pull-right">
      <em class="icon-close hand" (click)="onCancel()"></em>
    </div>
  </div>
  <div mat-dialog-content class="dialog-content p0 m0">
    <form fxLayout="column" fxLayoutAlign="start"
          fxFlex="1 0 auto" class="pt-lg">
      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" class="pl-4">
        <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
          <mat-label>Name</mat-label>
          <input matInput name="name" [(ngModel)]="data.name" required>
          <em matSuffix class="icon-paper-clip input-icon"></em>
          <mat-error>Cluster name is required!</mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
          <mat-label>Server</mat-label>
          <input matInput name="server" [(ngModel)]="data.api_server" required>
          <em matSuffix class="icon-layers input-icon"></em>
          <mat-error>Server information is required!</mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" fxFlex="34" class="pr-4">
          <mat-label>Port</mat-label>
          <input matInput name="port" [(ngModel)]="data.api_port" required>
          <em matSuffix class="icon-layers input-icon"></em>
          <mat-error>Port number is required!</mat-error>
        </mat-form-field>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto" class="pl-4">
        <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
          <mat-label>Username</mat-label>
          <input matInput name="username" [(ngModel)]="data.username" required>
          <em matSuffix class="icon-user input-icon"></em>
          <mat-error>Username is required!</mat-error>
        </mat-form-field>
        <mat-form-field appearance="outline" fxFlex="33" class="pr-4">
          <mat-label>Password</mat-label>
          <input type="password" matInput name="password" [(ngModel)]="data.password">
          <em matSuffix class="icon-lock input-icon"></em>
        </mat-form-field>
      </div>
    </form>
  </div>
  <div mat-dialog-actions class="dialog-actions pull-right" style="margin-right: 24px;">
    <a class="modal-cancel-button" (click)="onCancel()">Cancel</a>
    <button mat-button class="modal-submit-button" (click)="submitCluster()">Save</button>
  </div>
</div>
